<template>
    <div>
        <el-table @selection-change="handleSelectionChange" row-key="_id" :data="data" :header-cell-style="{
            backgroundColor: '#e5eeff', color: '#515a6e', fontWeight: 'normal'
        }">
            <!-- 复选框 -->
            <el-table-column v-if="checkbox" type="selection" width="55" />
            <el-table-column v-for="item in columns" :label="item.label" :prop="item.prop">
                <template v-if="$slots[item.prop]" #default="scope">
                    <slot :name="item.prop" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-container" v-if="pageData">
            <el-pagination :page-sizes="[5, 10, 15, 20]" v-model:current-page="pageData.currentPage"
                v-model:page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                :background="true" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { classListItem } from '@/api/modules/goodsList';
const emit=defineEmits(["getDeletData"])
type ColumnItem = {
    label: string;
    prop: string;
}

const { data = [], columns = [], checkbox } = defineProps<{
    data: any[],
    columns: ColumnItem[],
    total?: number,
    checkbox: boolean
}>();

const pageData = defineModel<PageQuery>();
const handleSelectionChange = (val:classListItem[]) => {
    console.log(val);
    emit("getDeletData",val)
}

</script>

<style scoped>
.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>